<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="edge">
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1.0,user-scalable=0">
    <meta content="telephone=no" name="format-detection" />
    <meta name="description" content="">
    <meta name="keywords" content="">
    <title>知识库-用户中心</title>
    <link rel="stylesheet" type="text/css" href="css/reset.css">
    <link rel="stylesheet" type="text/css" href="css/global.css">
    <link rel="stylesheet" type="text/css" href="css/media.css">
    <link rel="stylesheet" type="text/css" href="css/loading.css">
    <script type="text/javascript" src="js/lib/loading.js"></script>
</head>
<body id="app">
    <!-- 头部 -->
    <header class="header">
        <a href="javascript:;" title="返回" class="icon back" @click="back();"></a>
        <h1 id="huserName" v-cloak>{{ user.userName }}</h1>
        <a href="javascript:;" title="确定" class="text" @click="confirm();" v-if="willShow === 'modifyText'">确定</a>
    </header>
    
    <section class="padT23 userHome" v-show="willShow === 'myCenter' && !showModal" v-cloak>
        <div class="padTB24 vault">
            <div class="pr padB24">
                <a href="javascript:;" class="dib" @click="fn('modify')">
                    <img v-bind:src=user.headPic alt="" class="avatar">
                    <span class="db font18 color22 level">{{ user.level }}</span>
                </a>
            </div>
            <div class="clearfix userRecord">
                <span class="fl" @click="fn('record')">{{ user.goldCount }}<br><em>白金币</em></span>
                <span class="fl" @click="fn('collect')">{{ user.collectionCount }}<br><em>收藏</em></span>
                <span class="fl" @click="fn('dynamic')"><div class="dynamicIcon"></div><em>知识动态</em></span>
            </div>
        </div>
        <!-- tab -->
        <ul class="clearfix tabUl quesTab five tabFixed">
            <li class="on" @click="slides(0,$event)">文档</li>
            <li @click="slides(1,$event)">话题</li>
            <li @click="slides(2,$event)">提问</li>
            <li @click="slides(3,$event)">回答</li>
            <li @click="slides(4,$event)">圈子</li>
        </ul>
        <div>
            <!-- 文档 -->
            <ul class="tabCont bgff quesCont tabBox" v-if="tabs==0">
                
                <li v-for="info in infos" v-touch:swipe="swipeLeft($event)" v-touch-options:swipe="{ direction: 'horizontal' }">

                    <div>
                        <a href="javascript:;" @click="toArticleDetail(info.id)" class="clearfix db">
                            <img :src="info.suffix | path" class="fileIcon" onerror="javascript:this.src='images/icon/type/OTHER.png';this.onerror=null;">
                            <div class="ques">
                                <h3 class="font26 color22 ell">{{ 
                                info.title }}</h3>
                                <span class="db font24 color21 ell">{{ info.content }}</span>
                            </div>
                        </a>
                        <template v-if="info.type.length>0">
                            <a href="meeting.html?id={{info.id}}&name={{info.name}}" class="font18 colorB tips" v-for="info in info.type"><em>{{ info.name }}</em></a>
                        </template>
                        <div class="font18 colorb6 queAuthor">
                            <span>{{ info.author }}</span>
                            <span>{{ info.score }}分</span>
                            <span>{{ info.size }}</span>
                            <span>{{ info.readCount }}阅读过</span>
                            <span>{{ info.date }}</span>
                        </div>
                    </div>
                    <div class="font26 dib shareColl two">
                        <a href="javascript:void(0);" @click="share({shareId:info.id,shareTit:info.title,sharePic:info.suffix,isdoc:true},$event);" class="shareIcon"></a>
                        <a href="javascript:void(0);" @click="doDel({dataID:info.id},$event);" class="delIcon"></a>
                    </div>
                </li>
                <span class="loading-more">加载更多...</span>
            </ul>
            <!-- 话题 -->
            <ul class="tabCont quesCont askCont" v-if="tabs==1">
                <li v-for="topic in topics" v-touch:swipe="swipeLeft($event)" v-touch-options:swipe="{ direction: 'horizontal' }">
                    <div>
                        <a href="javascript:;" @click="toCircleDetail(topic.id)" class="db">
                            <div class="clearfix padB24">
                                <img v-bind:src=topic.headPic class="fl borderRadius wh45">
                                <span class="db fl font20 color72 name">{{ topic.userName }}<em class="colorB">({{ topic.level }})</em></span>
                                <span class="fr font20 line95 colorb6">{{ topic.commentDate }}</span>
                            </div>
                            <h3 class="font26 color22 titles">{{ topic.title }}</h3>
                            <span class="db font24 color72 descText">{{ topic.content | delimages | delhtml}}</span>
                            <!-- <div class="clearfix marT24 topicImgBox">
                                <span v-for="(index, item) in topic.content | imageurls" track-by="$index">
                                    <span class="db fl j_6 topicImg" v-if="index < 4">
                                        <img data-src="{{item}}" src="images/imgload.gif" alt="" class="loadImg">
                                    </span>
                                <em class="imgNum" v-if="index >= 4">{{index + 1}}</em>
                                </span>
                            </div> -->

                            <template v-if="topic.type.length>0">
                                <a href="javascript:void(0);" class="db font18 colorB tips"><em v-for="topic in topic.type">{{ topic.name }}</em></a>
                            </template>
                            <div class="clearfix">
                                <!-- <template v-if="topic.commentPicture.length > 0">
                                <span class="fl imgIcon"></span>
                                </template> -->
                                <!-- 带精字图标的话题 -->
                                <template v-if="topic.isEssence == 1">
                                    <span class="fl jIcon"></span>
                                </template>
                                <span class="fr comIcon">{{ topic.commentCount }}</span>
                                <span class="fr view">{{ topic.readCount }}</span>
                                <!-- 如果是已点赞的，则有class="on" -->
                                <span class="fr likeIcon" v-bind:class="{'on':topic.likeCount>0}">{{ topic.likeCount }}</span>
                            </div>
                        </a>
                    </div>
                    <div class="font26 dib shareColl two">
                        <a href="javascript:void(0);" @click="share({shareId:topic.id,shareTit:topic.title,sharePic:topic.pic},$event);" class="shareIcon"></a>
                        <a href="javascript:void(0);" @click="doDel({dataID:topic.id},$event);" class="delIcon"></a>
                    </div>
                </li>
                <span class="loading-more">加载更多...</span>
            </ul>
            <!-- 提问 -->
            <!-- 提问与回答排版一致 -->
            <ul class="tabCont quesCont askCont" v-if="tabs==2">
                <li v-for="ask in asks" v-touch:swipe="swipeLeft($event)" v-touch-options:swipe="{ direction: 'horizontal' }">
                    <div>
                        <a href="javascript:;" @click="toAskDetail(ask.id)" class="db">
                            <div class="clearfix padB24">
                                <img v-bind:src=ask.headPic class="fl borderRadius wh45">
                                <span class="db fl font20 color72 name">{{ ask.userName }}<em class="colorB">({{ ask.level }})</em></span>
                                <span class="fr font20 line95 colorb6">{{ ask.commentDate }}</span>
                            </div>
                            <h3 class="font26 color22 titles">{{ ask.title }}</h3>
                            <span class="db font24 color72 descText">{{ ask.comment }}</span>
                            <template v-if="ask.type.length>0">
                                <a href="javascript:void(0);" class="db font18 colorB tips"><em v-for="ask in ask.type">{{ ask.name }}</em></a>
                            </template>
                            <div class="clearfix">
                                <span class="fl imgIcon"></span>
                                <span class="fr comIcon">{{ ask.commentCount }}</span>
                                <span class="fr view">{{ ask.readCount }}</span>
                            </div>
                        </a>
                    </div>
                    <div class="font26 dib shareColl two">
                        <a href="javascript:void(0);" @click="share({shareId:ask.id,shareTit:ask.title,sharePic:ask.pic},$event);" class="shareIcon"></a>
                        <a href="javascript:void(0);" @click="doDel({dataID:ask.id},$event);" class="delIcon"></a>
                    </div>
                </li>
                <span class="loading-more">加载更多...</span>
            </ul>
            <!-- 回答 -->
            <ul class="tabCont quesCont askCont" v-if="tabs==3">
                <li v-for="ask in asks" v-touch:swipe="swipeLeft($event)" v-touch-options:swipe="{ direction: 'horizontal' }">
                    <div>
                        <a href="javascript:;" @click="toAskDetail(ask.id)" class="db">
                            <div class="clearfix padB24">
                                <img v-bind:src=ask.headPic class="fl borderRadius wh45">
                                <span class="db fl font20 color72 name">{{ ask.userName }}<em class="colorB">({{ ask.level }})</em></span>
                                <span class="fr font20 line95 colorb6">{{ ask.commentDate }}</span>
                            </div>
                            <h3 class="font26 color22 titles">{{ ask.title }}</h3>
                            <span class="db font24 color72 descText">{{ ask.comment }}</span>
                            <template v-if="ask.type.length>0">
                                <a href="javascript:void(0);" class="db font18 colorB tips"><em v-for="ask in ask.type">{{ ask.name }}</em></a>
                            </template>
                            <div class="clearfix">
                                <span class="fl imgIcon"></span>
                                <span class="fr comIcon">{{ ask.commentCount }}</span>
                                <span class="fr view">{{ ask.readCount }}</span>
                            </div>
                        </a>
                    </div>
                    <div class="font26 dib shareColl two">
                        <a href="javascript:void(0);" @click="share({shareId:ask.id,shareTit:ask.title,sharePic:ask.pic},$event);" class="shareIcon"></a>
                        <a href="javascript:void(0);" @click="doDel({dataID:ask.id},$event);" class="delIcon"></a>
                    </div>
                </li>
                <span class="loading-more">加载更多...</span>
            </ul>

            <!-- 圈子 -->
            <ul class="tabCont quesCont myCircle" v-if="tabs==4">
                <!-- 加入的圈子 -->
                <!-- 分类 -->
                <div class="" v-cloak>
                    <div class="padB24">
                        <ul class="clearfix circle bgff">
                            <li v-for="info in circle">
                                <a href="javascript:;" @click="toCircleList(info.id)" class="clearfix db">
                                    <span class="db j_1 photo"><img data-src="{{ info.pic }}" src="images/imgload.gif" class="loadImg" /></span>
                                    <div class="fl text">
                                        <span class="db font24 color21 ell">{{ info.name }}</span>
                                        <span class="db font18 colorb6 ell">{{ info.content }}</span>
                                    </div>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
            </ul>
        </div>
    </section>
    <!-- 白金币 -->

    <section class="padT23" v-show="willShow === 'record' " v-cloak>
        <div class="recordList font24 padLR24">
            <ul class="pad24 colorb6">
                <li v-for="gold in goldList">{{gold.date}}&emsp;{{gold.str}}</li>
            </ul>
        </div>    
    </section>

    <!-- 加入的圈子 -->
    <section class="padT23 myCircle" v-show="willShow === 'community' "> 
        <!-- 分类 -->
        <div class="" v-cloak>
            <div class="padB24">
                <ul class="clearfix circle bgff">
                    <li v-for="info in circle">
                        <a href="javascript:;" @click="toCircleList(info.id)" class="clearfix db">
                            <span class="db j_1 photo"><img data-src="{{ info.pic }}" src="images/imgload.gif" class="loadImg" /></span>
                            <div class="fl text">
                                <span class="db font24 color21 ell">{{ info.name }}</span>
                                <span class="db font18 colorb6 ell">{{ info.content }}</span>
                            </div>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </section>

    <section class="padT23" v-show="willShow === 'modify' " v-cloak>
        <ul class="userModify">
            <li class="clearfix pad24 font24 borderB bgff">
                <span class="fl iconBefore ID">账号</span>
                <input type="text" class="fr w65 textR colorB borderN" value="{{user.account}}" placeholder="请填写" readonly />
            </li>
            <li class="clearfix pad24 font24 borderB bgff">
                <span class="fl iconBefore user">姓名</span>
                <input type="text" class="fr w65 textR colorB borderN" name='userName' value="{{user.userName}}" placeholder="请填写" readonly />
            </li>
            <li class="clearfix pad24 font24 borderB bgff borderspace">
                <span class="fl iconBefore gender">性别</span>
                <input type="text" class="fr w65 textR colorB borderN" name='sex' value="{{user.sex}}" readonly />
            </li>
            <li class="clearfix pad24 font24 borderB bgff">
                <span class="fl iconBefore duties">职务</span>
                <input type="text" class="fr w65 textR colorB borderN" name='post' value="{{user.post}}" readonly />
            </li>
            <li class="clearfix pad24 font24 borderB bgff">
                <span class="fl iconBefore position">职位</span>
                <input type="text" class="fr w65 textR colorB borderN" name='position' value="{{user.position}}" readonly />
            </li>
            <li class="clearfix pad24 font24 borderB bgff">
                <span class="fl iconBefore expert">职称和职档</span>
                <input type="text" class="fr w65 textR colorB borderN" name='title' value="{{user.title}}" readonly />
            </li>
            <li class="clearfix pad24 font24 borderB bgff">
                <span class="fl iconBefore organization">组织位置</span>
                <input type="text" class="fr w65 textR colorB borderN" name='organizationLocation' value="{{user.organizationLocation}}" readonly />
            </li>
            <li class="clearfix pad24 font24 borderB bgff  borderspace">
                <span class="fl iconBefore time">入职时间</span>
                <input type="text" class="fr w65 textR borderN" name='entryTime' value="{{user.entryTime}}" data-modifiable="true" placeholder="请填写" readonly />
            </li>
            <li class="clearfix pad24 font24 borderB bgff">
                <span class="fl iconBefore place">工作地点</span>
                <input type="text" class="fr w65 textR colorB borderN" name='workPlace' value="{{user.workPlace}}" readonly />
            </li>
            <li class="clearfix pad24 font24 borderB bgff  borderspace">
                <span class="fl iconBefore office">办公地点</span>
                <input type="text" class="fr w65 textR colorB borderN" name='officeLocation' value="{{user.officeLocation}}" readonly />
            </li>
            <li class="clearfix pad24 font24 borderB bgff">
                <span class="fl iconBefore number">手机</span>
                <input type="text" class="fr w65 textR colorB borderN" name='mobilePhone' value="{{user.mobilePhone}}" readonly />
            </li>
            <li class="clearfix pad24 font24 borderB bgff">
                <span class="fl iconBefore telephone">电话</span>
                <input type="text" class="fr w65 textR colorB borderN" name='telephone' value="{{user.telephone}}" readonly />
            </li>
            <li class="clearfix pad24 font24 borderB bgff">
                <span class="fl iconBefore studio">座机</span>
                <input type="text" class="fr w65 textR borderN" name='landLine' value="{{user.landLine}}" data-modifiable="true" placeholder="请填写" readonly />
            </li>
            <li class="clearfix pad24 font24 borderB bgff">
                <span class="fl iconBefore fax">传真</span>
                <input type="text" class="fr w65 textR borderN" name='fax' value="{{user.fax}}" data-modifiable="true" placeholder="请填写" readonly />
            </li>
            <li class="clearfix pad24 font24 borderB bgff  borderspace">
                <span class="fl iconBefore email">邮箱</span>
                <input type="text" class="fr w65 textR colorB borderN" name='mailbox' value="{{user.mailbox}}" readonly />
            </li>
            <li class="clearfix pad24 font24 borderB bgff">
                <span class="fl iconBefore project">项目经验</span>
                <input type="text" class="fr w65 textR borderN" name='projectExperience' value="{{user.projectExperience}}" data-modifiable="true" placeholder="请填写" readonly />
            </li>
            <li class="clearfix pad24 font24 borderB bgff">
                <span class="fl iconBefore qualification">资格证书</span>
                <input type="text" class="fr w65 textR borderN" name='qualification' value="{{user.qualification}}" data-modifiable="true" placeholder="请填写" readonly />
            </li>
            <li class="clearfix pad24 font24 borderB bgff">
                <span class="fl iconBefore winning">获奖记录</span>
                <input type="text" class="fr w65 textR borderN" name='winningRecord' value="{{user.winningRecord}}" data-modifiable="true" placeholder="请填写" readonly />
            </li>
            <li class="clearfix pad24 font24 borderB bgff  borderspace">
                <span class="fl iconBefore interesting">爱好专长</span>
                <input type="text" class="fr w65 textR borderN" name='hobby' value="{{user.hobby}}" data-modifiable="true" placeholder="请填写" readonly />
            </li>
        </ul>
    </section>

    <section class="padT23 modify" v-if="willShow === 'modifyText' " v-cloak>
        <input id="title" value='{{value}}' class="mar24 pad24"></input>
    </section>

    <share :show.sync="showModal" ></share>
    <!-- template for the modal component -->
    <script type="x/template" id="share-template">
        <!-- 头部 -->
        <header class="header" v-show="show">
            <div class="clearfix search-box searchBigBox">
                <input type="button" class="fl search-btn" @click="search();">
                <input type="text" class="search-txt" placeholder="搜索" value="" maxlength="30" v-model="query">
            </div>
            <a href="javascript:void(0);" title="确认" @click='ok();' class="text">确认</a>
        </header>

        <!-- 通讯录 -->
        <section class="padT23 addrBook" v-show="show">
            <div v-for="info in users">
                <span class="db pad24 font18 color72">{{info.type}}</span>
                <ul id='uluser' class="padLR24 bgff">
                    <!-- 选中则加上 class="on" -->
                    <li dataID='{{info.uid}}' class="padTB24 font24 color21 borderB" @click="checked($event);" v-for="info in info.userList | filterBy query in 'uname'">
                        {{info.uname  }}
                    </li>
                </ul>
            </div>
            
        </section>
    </script>


    <script type="text/javascript" src="js/lib/jquery.min.js"></script>
    <script type="text/javascript" src="js/lib/vue.js"></script>
    <script src="js/lib/hammer.min.js"></script>
    <script src="js/lib/vue-touch.js"></script>
    <script type="text/javascript" src="js/lib/common.js"></script>
    <script type="text/javascript" src="js/lib/global.js"></script>
    <script type="text/javascript" src="js/lib/alert.js"></script>
    <script type="text/javascript" src="js/myUserCenter.js"></script>

</body>
</html>